<script setup>
import {computed, reactive} from "vue";
import {formsOutCssMapping} from "@/components/constants";
import {Close} from "@element-plus/icons-vue";
import BatchOverWritingTags from "@/components/WordFormedTag/BatchOverWritingTags.vue";
import HoverEventTest from "@/testCompGroupC/subTest/HoverEventTest.vue";
import HoverEventTest1 from "@/testCompGroupC/subTest/HoverEventTest1.vue";
import DraggableTest from "@/testCompGroupC/subTest/DraggableTest.vue";
import DraggableTest1 from "@/testCompGroupC/subTest/DraggableTest1.vue";

let theModel = reactive(['v.1','n.2','adj.3'])
</script>

<template>
<div>

    <DraggableTest></DraggableTest>
    <DraggableTest1></DraggableTest1>

<!--  <HoverEventTest></HoverEventTest>-->
  <div style="display: flex;flex-direction: row">
    <HoverEventTest1 style="--aniToWidth:200px;--aniToHeight:80px;z-index: 100">
    test here
  </HoverEventTest1>
    <HoverEventTest1 style="--aniToWidth:200px;--aniToHeight:80px;">
      flying something flying something flying something flying something flying something flying something flying something
    </HoverEventTest1>
  </div>

<!--  <TagBaseWord></TagBaseWord>-->

    <BatchOverWritingTags v-model="theModel" :theForm="`v`"></BatchOverWritingTags>
<!--    {{label}}-->
<!--    <el-tag class="fc-tempPick-tag" :style="styleObject">-->
<!--        {{label}}-->
<!--    </el-tag>-->
<!--    <el-tag class="fc-tempPick-tag" :style="styleObject">-->
<!--        {{label}}-->
<!--    </el-tag>-->
<!--    <el-button class="formsCountBtn" :icon="Close" circle></el-button>-->
</div>
</template>

<style scoped>
.el-tag.fc-tempPick-tag {
    font-weight: 600;
    --el-font-size-base: 12px;
    line-height: 8px;
    height: var(--common-tag-height);
    padding: 7px 7px;
    margin: 3px;
    border-width: 1.5px;
    --el-tag-border-radius: 3px;
    --el-tag-bg-color: var(--color-formOut-default-bg-color);
    --el-tag-border-color: var(--color-formOut-default);
    --el-tag-hover-color: var(--color-formOut-default);
    --el-tag-text-color: var(--color-formOut-default);
    color: var(--color-formOut-default);
    border-style: dashed;
    border-color: var(--color-formOut-default);
//background-color: var(--color-nounsOut-bg-color-editing); background-color: var(--color-formOut-default-bg-color);
}


.el-button.formsCountBtn{
    line-height: 8px;
    height: var(--common-tag-height);
    width: 22px;
    padding:7px 7px;
    margin: 2px;
    font-weight: 520;
    --el-font-size-base: 12px;
    /*background-color: var(--el-button-bg-color);*/
    /*border-color: var(--el-button-border-color);*/
}
</style>